<template>
  <div class="pc-breadcrumb">
    <i class="iconfont iconlocation"></i>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
      <el-breadcrumb-item :to="{ path: backRouter }" :class="{local:!backRouter}">{{backTitle}}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="secTitle" :class="{local:!secRouter}">{{secTitle}}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="thirTitle" :class="{local:!thirRouter}">{{thirTitle}}</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  props: [
    "backTitle",
    "backRouter",
    "secTitle",
    "secRouter",
    "thirTitle",
    "thirRouter"
  ]
};
</script>

<style lang="scss">
.pc-breadcrumb {
  .iconlocation {
    font-size: 17px;
    color: $grey_deep;
  }
  .bread {
    margin-left: 10px;
    display: inline-block;
    font-size: 14px;
  }
  .el-breadcrumb__inner {
    font-weight: 600 !important;
  }
  .local span {
    color: $blue !important;
  }
  .is-link {
    color: $grey_deep !important;
    display: inline-block;
  }
}
</style>